[CSS] ::before ::after 선택자 예제 및 활용

가상 선택자, pseudo selector에 대하여 알아봅니다. 이 중에서도 오늘은 ::before 그리고 ::after 선택자는 대하여 알아보겠습니다. ::before 선택자는 다른 선택자의 뒤에 함께 쓰여 원하는 텍스트 및 스타일을 넣거나 지정할 때 사용합니다. ::after의 경우는 반대로 뒤에 추가하는 것이 이 둘의 차이점입니다.

# 가상 선택자 ::after 또는 ::before가 쓰이는 경우

아래의 경우에 가상 선택자가 사용됩니다.

• 텍스트끼리 서로 구분할 경
• 특수코드를 변환없이 그대로 보여줄 경우
• 백그라운드 이미지를 해당 문구 앞 또는 뒤에 삽입하는 경우

아래는 간단한 예제입니다.

# ::after 및 ::before 사용방법 및 예제

간단한 두 가지 예제를 알아봅니다. 먼저 ::before를 사용하여 적용된 모든 엘리먼트의 앞에 '-' 기호를 추가합니다.

- CSS 코드
- HTML 코드
아래는 위 코드를 실행할 경우의 결과입니다. 모든 .test 클래스의 문자 앞에 구분문자 - 기호가 생겨났습니다.

아래는 두 번째 예제입니다. 이번에는 특수기호가 ::before 또는 ::after에 사용될 경우 어떻게 나타나는지 알아봅니다.

- HTML 코드

아래는 출력결과입니다. 문자 뒤에 특수기호가 변환되지 않고 그대로 표현됨

즉  는 공백으로 표현되지 않습니다. 꼭 알아두세요.

! 기타 참고사항

참고로 ,위 선택자는 익스플로러 9 이상의 거의 모든 브라우저에서 사용이 가능합니다. 만약 익스플로러 8에서 사용하시려면 :before, :after을 사용해보세요. 콜론(:) 기호를 하나 빼고 사용하시면 됩니다. 아래처럼 CSS를 바꿔서 사용하면 됩니다.

IE 8 이 아니라면 일반적으로 ::before, ::after를 사용하는 점 알아두세요.